import { Tabs, Alert } from '@aws-amplify/ui-react';
import { CURRENT_MAJOR_VERSIONS } from '@/data/frameworks';

export const latestVersion = CURRENT_MAJOR_VERSIONS['react'];
export const amplify5UIVersion = 5;

  <Tabs.Container defaultValue={latestVersion}>
    <Tabs.List>
      <Tabs.Item value={latestVersion}>`@aws-amplify/ui-react` v{latestVersion} (latest)</Tabs.Item>
      <Tabs.Item value={amplify5UIVersion}>`@aws-amplify/ui-react` v{amplify5UIVersion} and below</Tabs.Item>
    </Tabs.List>
    <Tabs.Panel value={latestVersion}>
      In `@aws-amplify/ui-react` version {latestVersion}, `Auth` function calls are imported directly as shown below. 
    ```jsx{2,15} file=../../../../../../../../examples/next/pages/ui/components/authenticator/override-function-calls/index.page.tsx
    ```
    </Tabs.Panel>
    <Tabs.Panel value={amplify5UIVersion}>
      <Alert role="none" variation="warning" heading="Sign Up Auto Sign In">
        If you're overriding `signUp` in `@aws-amplify/ui-react` version {amplify5UIVersion} or earlier, you must include the `autoSignIn` key and set `enabled` to true, as shown in the example below.
      </Alert>
      In `@aws-amplify/ui-react` version {amplify5UIVersion} and earlier, `Auth` function calls are imported from the `Auth` object.
    ```jsx{1,14,19}
      import { Auth } from 'aws-amplify';
      import { Authenticator } from '@aws-amplify/ui-react';
      import '@aws-amplify/ui-react/styles.css';

      export default function App() {
        const services = {
          async handleSignUp(input) {
            let { username, password, attributes } = input;
            // custom username and email
            username = username.toLowerCase();
            attributes.email = attributes.email.toLowerCase();
            return Auth.signUp({
              username,
              password,
              attributes,
              autoSignIn: {
                enabled: true,
              },
            });
          },
        };

        return (
          <Authenticator services={services} initialState="signUp">
            {({ signOut }) => <button onClick={signOut}>Sign out</button>}
          </Authenticator>
        );
      }
    ```
    </Tabs.Panel>
  </Tabs.Container>
